<!DOCTYPE html>
<html lang="zh" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock %} - {{ site_config.get_config('site_name', 'PPress') }}</title>
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
    {% block meta %}
    <meta name="keywords" content="{{ site_config.get_config('site_keywords', 'PPress,技术,博客,Python,Web开发') }}">
    <meta name="description" content="{{ site_config.get_config('site_description', '分享技术知识和经验') }}">
    {% endblock %}

    <script src="{{ url_for('static', filename='default/vendor/3.4.5') }}"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {}
            }
        }
    </script>
    <script src="{{ url_for('static', filename='default/vendor/jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='default/js/darkMode.js') }}"></script>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    {% block head %}{% endblock %}
    <style>
        /* 隐藏滚动条但保持可滚动 */
        .scrollbar-hide {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;     /* Firefox */
        }
        .scrollbar-hide::-webkit-scrollbar {
            display: none;             /* Chrome, Safari and Opera */
        }
        /* 添加页面布局样式 footer于底部 */
        html, body {
            height: 100%;
        }
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        main {
            flex: 1 0 auto;
            width: 100%;
        }
        /* Logo 样式 */
        .logo-circle {
            position: relative;
            overflow: hidden;
            transform: translateZ(0);  /* 启用硬件加 */
            background: linear-gradient(135deg, #0180FF, #0178FF);  /* 亮色模式下的渐变 */
        }
        
        .logo-circle::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 60%);
            z-index: 1;
            border-radius: 9999px;
        }
        
        .dark .logo-circle {
            background: linear-gradient(135deg, #0180FF, #0178FF);  /* 暗色模式下的渐变 */
        }
        
        /* Logo 悬停效果 */
        .logo-circle:hover {
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(1, 128, 255, 0.6);
        }
    </style>
</head>
<body class="min-h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-200">
<nav class="bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-40">
    <div class="max-w-7xl mx-auto">
        <div class="px-4 border-b dark:border-gray-700">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <a href="{{ url_for('blog.index') }}" class="flex-shrink-0">
                        <span class="text-xl font-bold text-gray-800 dark:text-white flex items-center space-x-2">
                            <div class="relative w-[50px] h-[50px] flex items-center justify-center">
                                <div class="logo-circle w-8 h-8 rounded-full flex items-center justify-center text-white font-bold text-xl transition-all duration-300">
                                    P
                                </div>
                            </div>
                            <span class="ml-2 font-bold text-gray-900 dark:text-white truncate max-w-[120px] sm:max-w-[200px] md:max-w-[450px]">
                                {{ site_config.get_config('site_name', 'PPress') }}
                            </span>
                        </span>
                    </a>
                </div>
                <div class="hidden md:flex flex-1 items-center justify-center px-8 max-w-3xl">
                    <div class="w-full relative">
                        <form action="{{ url_for('blog.search') }}" method="get" class="flex items-center" onsubmit="return validateSearch(this)">
                            <div class="relative flex-1">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                                <input type="text" name="q"
                                       autocomplete="off"
                                       class="block w-full pl-10 pr-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg leading-5 bg-gray-50 dark:bg-gray-700 placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-white focus:outline-none focus:bg-white dark:focus:bg-gray-600 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition-colors duration-200"
                                       placeholder="搜索文章..."
                                       value="{{ request.args.get('q', '') }}">
                            </div>
                            <button type="submit"
                                    class="ml-3 inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-colors duration-200 min-w-[4rem]">
                                搜索
                            </button>
                        </form>
                        <div id="searchSuggestions" class="absolute w-full mt-1 bg-white dark:bg-gray-800 rounded-lg shadow-lg border dark:border-gray-600 border-gray-200 hidden z-50"></div>
                    </div>
                </div>
                <div class="flex items-center space-x-4">
                    {% if current_user.is_authenticated %}
                    <a href="{{ url_for('blog.edit') }}"
                       class="hidden md:inline-flex items-center text-blue-600 hover:text-blue-700 transition-colors duration-200">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                        </svg>
                        发布文章
                    </a>
                    <div class="relative">
                        <button class="flex items-center space-x-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
                                onclick="toggleDropdown(this)">
                            <img src="{{ current_user.avatar }}"
                                 alt="avatar"
                                 class="w-8 h-8 rounded-full object-cover border border-gray-200">
                            <span>{{ current_user.nickname }}</span>
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                            </svg>
                        </button>
                        <div id="userDropdown" class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg py-1 hidden z-50">
                            <a href="{{ url_for('blog.edit') }}"
                               class="md:hidden flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                                </svg>
                                发布文章
                            </a>
                            <a href="{{ url_for('user.profile') }}"
                               class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                </svg>
                                个人中心
                            </a>
                            <a href="{{ url_for('user.my_articles') }}"
                               class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9.5a2 2 0 00-2-2h-2m-4 0h4"></path>
                                </svg>
                                我的文章
                            </a>
                            {% if current_user.role == 'admin' %}
                            <a href="{{ url_for('admin.dashboard') }}" target="_blank"
                               class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                </svg>
                                管理后台
                            </a>
                            {% endif %}
                            <div class="border-t border-gray-100"></div>
                            <a href="{{ url_for('auth.logout') }}"
                               class="flex items-center px-4 py-2 text-sm text-red-600 hover:bg-red-50">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
                                </svg>
                                退出登录
                            </a>
                            <button onclick="toggleTheme()"
                                    class="md:hidden w-full flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                                <svg id="mobile-dark-icon" 
                                     class="w-4 h-4 mr-2 block dark:hidden" 
                                     fill="currentColor" 
                                     viewBox="0 0 20 20">
                                   <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
                               </svg>
                               <svg id="mobile-light-icon"
                                    class="w-4 h-4 mr-2 hidden dark:block"
                                    fill="currentColor"
                                    viewBox="0 0 20 20">
                                   <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path>
                               </svg>
                               <span class="block dark:hidden">黑夜模式</span>
                               <span class="hidden dark:block">白天模式</span>
                            </button>
                        </div>
                    </div>
                    {% else %}
                    <a href="{{ url_for('auth.login') }}"
                       class="dark:text-gray-300 text-gray-700 hover:text-gray-900 dark:hover:bg-gray-600 hover:bg-gray-100 px-4 py-2 rounded-lg text-sm transition-colors duration-200">
                        登录
                    </a>
                    <a href="{{ url_for('auth.register') }}"
                       class="text-blue-600 hover:text-blue-700 px-4 py-2 text-sm transition-colors duration-200">
                        注册
                    </a>
                    {% endif %}
                    <button id="theme-toggle"
                            onclick="toggleTheme()"
                            class="hidden md:block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
                        <svg id="theme-toggle-dark-icon"
                             class="w-5 h-5"
                             fill="currentColor"
                             viewBox="0 0 20 20">
                            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
                        </svg>
                        <svg id="theme-toggle-light-icon"
                             class="hidden w-5 h-5"
                             fill="currentColor"
                             viewBox="0 0 20 20">
                            <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path>
                        </svg>
                    </button>
                    <button onclick="toggleMobileSearch()"
                            class="md:hidden text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2.5">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        <div id="mobileSearch" class="hidden md:hidden px-4 py-3 border-b dark:border-gray-700">
            <form action="{{ url_for('blog.search') }}" method="get" class="flex items-center" 
                  onsubmit="return validateSearch(this)">
                <div class="relative flex-1">
                    <input type="text" name="q"
                           id="mobilesearchInput"
                           autocomplete="off"
                           class="w-full pl-10 pr-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                                  bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white"
                           placeholder="搜索文章...">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                    </div>
                    <div id="mobilesearchSuggestions" 
                         class="absolute w-full mt-1 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-600 hidden z-50">
                    </div>
                </div>
            </form>
        </div>
        <div class="relative px-4">
            <button id="scrollLeft" class="hidden lg:flex absolute left-2 top-1/2 -translate-y-1/2 z-10 items-center justify-center w-8 h-8 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 rounded-full shadow-md">
                <svg class="w-5 h-5 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                </svg>
            </button>
            <button id="scrollRight" class="hidden lg:flex absolute right-2 top-1/2 -translate-y-1/2 z-10 items-center justify-center w-8 h-8 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 rounded-full shadow-md">
                <svg class="w-5 h-5 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
            </button>
            <div id="categoriesContainer" class="flex space-x-8 overflow-x-auto scrollbar-hide px-4 lg:px-8">
                <a href="{{ url_for('blog.index') }}"
                   class="py-4 px-1 border-b-2 {% if request.endpoint == 'blog.index' and not request.args.get('category') %}border-blue-500 text-blue-600{% else %}border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300{% endif %} whitespace-nowrap transition-colors duration-200">
                    全部
                </a>
                
                {% macro render_category_item(category, level=0) %}
                <div class="{% if level > 0 %}pl-{{ level * 4 }}{% endif %}">
                    <a href="{{ url_for('blog.category', id=category.slug if category.use_slug else category.id) }}"
                       class="block w-full px-4 py-2 text-{% if level == 0 %}base{% else %}sm{% endif %} text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
                        <span>{{ category.name }}</span>
                        <span class="text-xs text-gray-400 dark:text-gray-500 ml-1">({{ article_counts[category.id] }})</span>
                    </a>
                    {% if category._children %}
                        {% for child in category._children %}
                            {{ render_category_item(child, level + 1) }}
                        {% endfor %}
                    {% endif %}
                </div>
                {% endmacro %}

                {% macro render_category(category) %}
                    {% if category.name %}
                    <div class="relative" style="position: relative;">
                        <div class="flex items-center">
                            <a href="{{ url_for('blog.category', id=category.slug if category.use_slug else category.id) }}"
                               class="py-4 px-1 border-b-2 {% if (request.endpoint == 'blog.category' and ((category.use_slug and request.view_args.id == category.slug) or (not category.use_slug and request.view_args.id|string == category.id|string))) or (request.endpoint == 'blog.article' and article is defined and article.category_id == category.id) %}border-blue-500 text-blue-600{% else %}border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300{% endif %} whitespace-nowrap transition-colors duration-200">
                                {{ category.name }}
                                <span class="text-xs text-gray-400 dark:text-gray-500 ml-1">({{ article_counts[category.id] }})</span>
                            </a>
                            {% if category._children %}
                            <button onclick="toggleCategoryDropdown(this, 'dropdown-{{ category.id }}')"
                                    class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg ml-1">
                                <svg class="w-4 h-4 text-gray-500 dark:text-gray-400 transform transition-transform duration-200"
                                     fill="none" 
                                     stroke="currentColor" 
                                     viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                </svg>
                            </button>
                            {% endif %}
                        </div>
                        
                        {% if category._children %}
                        <div id="dropdown-{{ category.id }}" 
                             class="fixed mt-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg border dark:border-gray-700 py-2 hidden"
                             style="z-index: 50; min-width: 12rem; top: auto; left: auto; transform: none;">
                            {% for child in category._children %}
                                {{ render_category_item(child) }}
                            {% endfor %}
                        </div>
                        {% endif %}
                    </div>
                    {% endif %}
                {% endmacro %}
                
                {% for category in categories %}
                    {{ render_category(category) }}
                {% endfor %}

                <!-- 公开的自定义页面 -->
                {% for page in get_public_custom_pages() %}
                    <a href="{{ page.route }}"
                       class="py-4 px-1 border-b-2 {% if request.path == page.route %}border-blue-500 text-blue-600{% else %}border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300{% endif %} whitespace-nowrap transition-colors duration-200">
                        {{ page.title }}
                    </a>
                {% endfor %}
            </div>
        </div>
    </div>
</nav>

<main class="max-w-7xl mx-auto py-6 px-4 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200">
    {% with messages = get_flashed_messages() %}
    {% if messages %}
    {% for message in messages %}
    <div class="bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 text-blue-700 dark:text-blue-300 p-4 mb-4">
        {{ message }}
    </div>
    {% endfor %}
    {% endif %}
    {% endwith %}

    {% block content %}{% endblock %}
</main>
<script src="{{ url_for('static', filename='default/js/search.js') }}"></script>
<script>
    function toggleDropdown(button) {
        const dropdown = document.getElementById('userDropdown');
        dropdown.classList.toggle('hidden');

        // 点击其他地方关闭下拉菜单
        document.addEventListener('click', function closeDropdown(e) {
            if (!button.contains(e.target) && !dropdown.contains(e.target)) {
                dropdown.classList.add('hidden');
                document.removeEventListener('click', closeDropdown);
            }
        });
    }

    function toggleCategoryDropdown(button, dropdownId) {
        const dropdown = document.getElementById(dropdownId);
        const icon = button.querySelector('svg');

        // 切换下拉菜单显示状态
        dropdown.classList.toggle('hidden');
        // 切换箭头旋转
        icon.classList.toggle('rotate-180');

        // 点击其他地方关闭下拉菜单
        document.addEventListener('click', function closeDropdown(e) {
            if (!button.contains(e.target) && !dropdown.contains(e.target)) {
                dropdown.classList.add('hidden');
                icon.classList.remove('rotate-180');
                document.removeEventListener('click', closeDropdown);
            }
        });
    }
    

    function validateSearch(form) {
        const query = form.q.value.trim();
        if (!query) {
            flash('请输入搜索内容');
            return false;
        }
        if (query.length < 2) {
            flash('搜索内容至少需要2个字符');
            return false;
        }
        return true;
    }

    // 添加一个简单的提示函数
    function flash(message) {
        const flashDiv = document.createElement('div');
        flashDiv.className = 'bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 mb-4';
        flashDiv.textContent = message;

        const main = document.querySelector('main');
        main.insertBefore(flashDiv, main.firstChild);

        // 3秒后自动消失
        setTimeout(() => {
            flashDiv.remove();
        }, 3000);
    }

    function toggleMobileSearch() {
        const searchBar = document.getElementById('mobileSearch');
        searchBar.classList.toggle('hidden');
    }
</script>
<footer class="bg-white dark:bg-gray-800 mt-auto border-t dark:border-gray-700">
    <div class="max-w-7xl mx-auto px-4 py-8">
        <div class="flex flex-col items-center">
            <div class="text-gray-500 dark:text-gray-400 mb-2">
                {{ site_config.get_config('footer_text') }}
            </div>

            {% if theme.settings.email %}
            <div class="text-gray-400 dark:text-gray-500 text-sm mt-2">
                联系我们：{{ site_config.get_config('contact_email') }} QQ：{{ theme.settings.qq }}
            </div>
            {% endif %}

            <div class="flex space-x-4 mt-4">
                {% if theme.settings.github_url %}
                <a href="{{ theme.settings.github_url }}" target="_blank" class="text-gray-400 hover:text-gray-500">
                    GitHub
                </a>
                {% endif %}
                
                {% if theme.settings.gitee_url %}
                <a href="{{ theme.settings.gitee_url }}" target="_blank" class="text-gray-400 hover:text-gray-500">
                    Gitee
                </a>
                {% endif %}
            </div>
        </div>
    </div>
</footer>
{% include 'components/alert.html' %}
</body>
</html>